<template>
  <div class="dashboard">
    <!-- 核心指标概览区 -->
    <el-row :gutter="20" class="dashboard-cards">
      <el-col :span="6" v-for="card in statCards" :key="card.title">
        <el-card class="stat-card">
          <div class="stat-value">{{ card.value }}</div>
          <div class="stat-title">{{ card.title }}</div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 模块快捷导航 -->
    <el-row :gutter="20" class="dashboard-nav" style="margin-top:32px;">
      <el-col :span="4" v-for="nav in navModules" :key="nav.title">
        <el-card class="nav-card" @click="goModule(nav.route)">
          <div class="nav-icon">
            <component :is="nav.icon" size="28" />
          </div>
          <div class="nav-title">{{ nav.title }}</div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 数据统计图表区 -->
    <el-row :gutter="24" style="margin-top:32px;">
      <el-col :span="12">
        <el-card>
          <div class="chart-title">生产趋势</div>
          <v-chart :option="productionTrendOption" autoresize style="height:260px;" />
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card>
          <div class="chart-title">库存结构分布</div>
          <v-chart :option="inventoryPieOption" autoresize style="height:260px;" />
        </el-card>
      </el-col>
    </el-row>
    <el-row :gutter="24" style="margin-top:24px;">
      <el-col :span="12">
        <el-card>
          <div class="chart-title">供应商合格率排行</div>
          <v-chart :option="supplierBarOption" autoresize style="height:260px;" />
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card>
          <div class="chart-title">异常类型统计</div>
          <v-chart :option="abnormalPieOption" autoresize style="height:260px;" />
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import { ref } from "vue";
import { Document, ShoppingCart, Setting, List, Box, Finished , Histogram  } from "@element-plus/icons-vue";
import { use } from "echarts/core";
import VChart from "vue-echarts";
import { CanvasRenderer } from "echarts/renderers";
import { BarChart as EBarChart, PieChart, LineChart } from "echarts/charts";
import { TitleComponent, TooltipComponent, LegendComponent, GridComponent } from "echarts/components";
import { useRouter } from "vue-router"
use([CanvasRenderer, EBarChart, PieChart, LineChart, TitleComponent, TooltipComponent, LegendComponent, GridComponent]);
const router = useRouter()
// 模拟核心指标
const statCards = [
  { title: "今日生产领料", value: 21 },
  { title: "来料检验批次", value: 12 },
  { title: "库存预警物料", value: 3 },
  { title: "异常/待办事项", value: 5 },
];

// 模块快捷导航（自定义图标和路由名，实际路由跳转逻辑视你的路由配置）
const navModules = [
  { title: "物料管理", icon: Box, route: "/material/list" },
  { title: "物料分类", icon: List, route: "/material/category" },
  { title: "供应商管理", icon: Document, route: "/supply/vendor" },
  { title: "采购入库", icon: ShoppingCart, route: "/supply/purchase-in" },
  { title: "生产领料", icon: Finished , route: "/manufacture/manufactureMaterial" },
  { title: "生产工序", icon: Setting, route: "/manufacture/process" }
];

// 路由跳转
function goModule(route) {
  console.log(route)
  router.push(route)
}

// 生产趋势数据（折线图）
const productionTrendOption = {
  tooltip: { trigger: "axis" },
  legend: { data: ["生产领料", "生产排产"] },
  xAxis: { type: "category", data: ["周一","周二","周三","周四","周五","周六","周日"] },
  yAxis: { type: "value" },
  series: [
    { name: "生产领料", type: "line", smooth: true, data: [10, 13, 12, 15, 21, 16, 18] },
    { name: "生产排产", type: "line", smooth: true, data: [8, 10, 11, 14, 18, 14, 17] }
  ]
};

// 库存结构分布（饼图）
const inventoryPieOption = {
  tooltip: { trigger: "item" },
  legend: { bottom: 0 },
  series: [{
    name: "库存分布",
    type: "pie",
    radius: ["40%", "70%"],
    avoidLabelOverlap: false,
    label: { show: true, position: "outside" },
    data: [
      { value: 120, name: "原料药" },
      { value: 65, name: "包装材料" },
      { value: 40, name: "辅料" },
      { value: 20, name: "其它" }
    ]
  }]
};

// 供应商合格率排行（条形图）
const supplierBarOption = {
  tooltip: { trigger: "axis" },
  xAxis: { type: "value" },
  yAxis: { type: "category", data: ["供应商A","供应商B","供应商C","供应商D"] },
  series: [{
    name: "合格率（%）",
    type: "bar",
    data: [98, 93, 89, 87]
  }]
};

// 异常类型统计（饼图）
const abnormalPieOption = {
  tooltip: { trigger: "item" },
  legend: { bottom: 0 },
  series: [{
    name: "异常类型",
    type: "pie",
    radius: ["40%", "70%"],
    label: { show: true, position: "outside" },
    data: [
      { value: 2, name: "缺料" },
      { value: 1, name: "批次超期" },
      { value: 1, name: "质量问题" },
      { value: 1, name: "其它" }
    ]
  }]
};
</script>

<style scoped>
.dashboard {
  padding: 28px 32px 40px 32px;
}
.dashboard-cards {
  margin-bottom: 20px;
}
.stat-card {
  text-align: center;
  border-radius: 16px;
  box-shadow: 0 4px 16px #0001;
  padding: 32px 0 22px 0;
  min-height: 120px;
}
.stat-value {
  font-size: 2.6rem;
  font-weight: 700;
  color: #409eff;
  margin-bottom: 6px;
}
.stat-title {
  font-size: 1.05rem;
  color: #555;
}
.dashboard-nav {
  margin-bottom: 12px;
}
.nav-card {
  text-align: center;
  border-radius: 14px;
  cursor: pointer;
  transition: box-shadow 0.2s;
  padding: 20px 0 12px 0;
  min-height: 80px;
  box-shadow: 0 2px 8px #0001;
}
.nav-card:hover {
  box-shadow: 0 6px 16px #0002;
  border-color: #409eff;
}
.nav-icon {
  margin-bottom: 7px;
  color: #3b82f6;
}
.nav-title {
  font-size: 1rem;
  color: #444;
}
.chart-title {
  font-weight: 600;
  font-size: 1.13rem;
  margin-bottom: 10px;
  color: #333;
}
</style>
